<template>
  <el-card class="container">
    <div class="page-box">
      <div class="search-box">
        <el-button type="primary" plain style="position: absolute; right: 60px;border-radius: 4px;">创建菜单</el-button>
      </div>
      <div class="table-box">
        <el-table
          :data="list"
          style="width: 100%"
          row-key="id"
          border
          lazy
          :load="load"
          :tree-props="{children: 'children', label: 'permission_name'}"
        >
          <el-table-column label="菜单名称" width="200" prop="permission_name" sortable />
          <el-table-column label="菜单地址" width="200" prop="route" sortable />
          <el-table-column label="权限标识" width="240" prop="permission_mark" sortable />
          <el-table-column label="图标" width="80" prop="icon" align="center" sortable>
            <template #default="{row}">
              <svg-icon :icon-class="row.icon" />
            </template>
          </el-table-column>
          <el-table-column label="组件路径" width="240" prop="component" sortable />
          <el-table-column label="是否显示" width="80" prop="keepalive">
            <el-switch
              v-model="value"
            />
          </el-table-column>
          <el-table-column label="创建时间" width="240" prop="created_at" align="center" sortable>
            <template slot-scope="scope">
              <p>{{ new Date(scope.row.created_at) | dateFormat }}</p>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="140">
            <template slot-scope>
              <el-button type="primary" icon="el-icon-edit" size="mini" circle />
              <el-button type="warning" icon="el-icon-plus" size="mini" circle />
              <el-button type="danger" icon="el-icon-delete" size="mini" circle />
            </template>
          </el-table-column>

        </el-table>
      </div>
    </div>
  </el-card>
</template>

<script>
import { getMenu } from '@/api/permission/menu'
import moment from 'moment'
export default {
  filters: {
    dateFormat: function(date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  data() {
    return {
      list: [],
      children: [],
      value: true
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      this.list = await getMenu()
    }
  }
}
</script>

<style lang="scss" scoped>
  .page-box {
    padding: 20px;
    .search-box,.tabbar-box {
      padding-top: 10px;
      margin-bottom: 20px;
      height: 50px;
    }
  }
</style>

